<template>
    <div style="font-size:16px;font-weight: 600;"> <el-radio></el-radio>观众每日到场统计</div>
    <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()" style="margin-top: 10px;">
        <el-form-item>
            <el-select placeholder="请选择展会" v-model="state.dataForm.tid2" clearable filterable
                @change="handleTemplateChange">
                <el-option v-for="option in templates" :key="option.id" :label="option.template"
                    :value="option.id"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-select placeholder="请选择历史展会" v-model="state.dataForm.historyTid" clearable filterable
                @change="handleHistoryTemplateChange">
                <el-option v-for="option in history" :key="option.id" :label="option.template"
                    :value="option.id"></el-option>>
            </el-select>
        </el-form-item>
        <!--查询 -->
        <el-form-item v-if="state.hasPermission('crm:crmdatafavorite:save')">
            <el-button type="primary" @click="state.getDataList()">{{ $t("query") }}</el-button>
        </el-form-item>
        <el-table :header-cell-style="{ 'background': '#eef1f6', 'color': '#1f2d3d', 'border-color': '#dfe6ec' }"
            v-loading="state.dataListLoading" :data="state.dataList" border show-summary
            @selection-change="state.dataListSelectionChangeHandle" style="width: 100%;margin-top: 15px">
            <el-table-column align="center" prop="" label="日期" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="" label="预登记到场人数" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="" label="现场报名人数" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="" label="新增到场人数" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="" label="总人数(含重复参观)" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="" label="观众人次(排除展商)" show-overflow-tooltip></el-table-column>
        </el-table>
    </el-form>
    <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit"
        :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle"
        @current-change="state.pageCurrentChangeHandle"> </el-pagination>
</template>
<script lang="ts" setup>
import useView from "@/hooks/useView";
import { nextTick, reactive, ref, toRefs, watch } from "vue";
import { useRouter } from 'vue-router'
import baseService from "@/service/baseService";
import { ElMessage, ElMessageBox } from 'element-plus'

const view = reactive({
    getDataListURL: '',
    getDataListIsPage: true,
    deleteURL: "noc/nocly/delete",
    deleteIsBatch: true,
    dataForm: {
        tid: '' as any, //展会名称
        tid2: '' as any, //展会名称
        gid: '', //分组
        id: "",
        remark: "",
        historyTid: "" as any
    },

});

const init = () => {
    getTemplates();
    getHistory()
};


// 展会选择框的 change 事件处理函数
const handleTemplateChange = async (tid: number) => {
    state.dataForm.tid = tid;
    state.dataForm.historyTid = null;
};

// 历史展会选择框的 change 事件处理函数
const handleHistoryTemplateChange = async (tid: number) => {
    state.dataForm.tid = tid;
    state.dataForm.tid2 = null;
};


//展会名称列表
const templates = ref<any[]>([]);
const getTemplates = () => {
    baseService.get('/crm/noctemplate/list', { limit: 300 }).then((res) => {
        if (res.code == 0) {
            //刷新
            templates.value = res.data;
        }
    });
};

//历史展会名称列表
const history = ref<any[]>([]);
const getHistory = () => {
    baseService.get('/crm/noctemplate/listExpireByRole').then((res) => {
        if (res.code == 0) {
            //刷新
            history.value = res.data;
        }
    });
};


const state = reactive({ ...useView(view), ...toRefs(view) });
init();
</script>